<template>
  <div id="app">
   <div class="tab">
    <template >
    <el-tabs v-model="active" :tab-position="tabPosition">
      <el-tab-pane name="1" label="仪表盘">  仪表盘</el-tab-pane>
      <el-tab-pane name="2" label="日程表">  日程表</el-tab-pane>
      <el-tab-pane name="3" label="消息">    消息</el-tab-pane>
      <el-tab-pane name="4" label="我的课程">我的课程</el-tab-pane>
      <el-tab-pane name="5" label="我的数据">我的数据</el-tab-pane>
      <el-tab-pane name="6" label="评价" class="pj">
        <div class="le">
          <img  class="tt" src="./assets/kecheng.png">
          <h3>早上好，即使设计</h3>
          <ul> 
            <li>
              <img src="./assets/p1.png">
            </li>
            <li>
              <img src="./assets/p1.png">
            </li>
            <li>
              <img src="./assets/p1.png">
            </li>
          </ul>
          <h4>课程评价
            <ul><li>筛选订单</li><li>近一年</li></ul>
          </h4>
          <template>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                label="课程名称"
                width="300">
               <template slot-scope="scoped">
                <p style="display:flex;width: 260px;"> 
                  <img width="50px" height="50px" :src="scoped.row.img">
                  <span style="margin-left: 20px;">PS教程总是被说画面没质感？只需2招教你解决！
                  </span>
                </p>
               </template>
              </el-table-column>
              <el-table-column
                prop="stu"
                label="学员"
                width="180">
              </el-table-column>
              <el-table-column
              class="say"
                prop="say"
                label="评价">
              </el-table-column>
            </el-table>
          </template>
        </div>
        <div class="ri">
          <img src="./assets/个人资料.png" alt="">
          <img src="./assets/你的收入.png" alt="">
          <img src="./assets/平均评分.png" alt="">
          <img src="./assets/看法.png" alt="">
        </div>
      </el-tab-pane>
      <el-tab-pane name="7" label="我的账户">我的账户</el-tab-pane>
    </el-tabs>
    </template>
    <img src="./assets/zhuanye.png" class="tu">
 
   </div>
  </div>
</template>

<script>

import mockreq from './api/mockApi.js'
export default {
  name: 'App',
  components: {

  },
  data(){
    return{
      tabPosition: 'left',
      active:'6',
      tableData: []
    }
  },methods:{
    handleClick() {
        // console.log(tab, event);
      },
      leave(n,o){
        console.log(n,0);
        if(o=='0'){
          this.$message.error("禁止跳转")
          return false
        }
      }
  },
  async created(){
    const res = await mockreq({
            method:"get",
            url:'/data'
        })
        this.tableData = res.data.data
    console.log(res)

  }
}
</script>

<style lang="scss">
#app {
  width: 1400px;
  height: 800px;
  margin: 0 auto;

  .tab{
    position: relative;
    background: url('./assets/Logo.png') no-repeat ;
    background-size: 10%;
    background-position:50px 20px ;
    padding-top:100px;
    .tu{

      position: absolute;
      top: 0;
      left: 20px;
      top: 600px;
      width: 200px;
    }
    .pj{
      display: flex;
      .le{
        width:850px ;
        height: 800px;
        position: relative;
        background: white;
        .tt{
          position: absolute;
          right: 20px;
          top: 0px;
          width: 120px;
        }
        h3{
          margin:0px 30px;
        }
        ul{
          margin-top: 40px;
          display: flex;
          justify-content:space-evenly;
          
          li{
            img{
            width: 180px;
          }
          }
        }
        h4{
          margin-top: 20px;
          margin-left: 30px;
          display: flex;
          ul{
            margin-top: 0px;
            margin-left: 400px;
            li{
              font-size: 12px;
              font-weight: 200;
              margin: 5px 10px;
            }
          }
        }
        .el-table__header-wrapper{
          background: red;
        }
      }
      .ri{
        background: rgb(253,253,253);
        height: 800px;
        width: 400px;
        img{
          margin: 40px 30px 10px 30px;
          width: 80%;
        }
        
      }
    }
  }
  .el-tabs--left .el-tabs__item.is-left{
    height: 60px;
    width: 230px;
    border: 0;
    line-height: 60px;
    text-align: center;
  }
}
</style>
